import React, { Component } from 'react';
import "./index.css";
import { List } from "antd-mobile";
import { connect } from "react-redux";

class Message extends Component {
    // 按照用户分组，chat_id
    render() {
        const Item = List.Item;
        const Brief = Item.Brief;
        const chatGroup = {};
        this.props.Chats.chats.forEach(chat=>{
            chatGroup[chat.chat_id] = chatGroup[chat.chat_id] || [];
            chatGroup[chat.chat_id].push(chat);
        })
        const chatList = Object.values(chatGroup).sort((a,b)=>{
            // 排序
            const last_a = this.getLastChat(a).created_time;
            const last_b = this.getLastChat(b).created_time;
            return last_b - last_a
        });

        const myId = this.props.Users._id;
        return (
            <div>
                <List>
                   {
                       chatList.map((item,index)=>{
                           const last = this.getLastChat(item);
                           const rel_id = myId===last.from?last.to:last.from;

                           let list_unread = item.filter(ct=>(
                               !ct.read && ct.from !== myId
                           )).length
                            return (
                                rel_id ?
                                    <Item key={index} onClick={()=>this.chatListClick(rel_id)}>
                                        <div className="msg_box">
                                            <div className="msg_avatar">
                                                <img src={require(`../../assets/img/${this.props.Chats.users[rel_id].avatar}.png`)} alt=""/>
                                                {
                                                    list_unread?<span className="list_unread">{list_unread}</span>:null
                                                }
                                            </div>
                                            <div className="msg_user">
                                                {this.props.Chats.users[rel_id].name}  
                                                <Brief>{last.chat}</Brief>
                                            </div>
                                            <div className="arrow_box">
                                                <img src={require('../../assets/img/right_arrow.png')} alt=''></img>
                                            </div>
                                        </div>
                                    </Item>:null
                            )
                       })
                   }
                </List>
            </div>
        )
    }

    componentDidMount(){

    }

    chatListClick(toId){
        this.props.history.push('/chat/'+toId);
    }
    getLastChat(arrChat){
        return arrChat[arrChat.length-1]
    }
}


const mapStateToProps = (state,props)=> {
    return {
        Users:state.userReducer,
        Chats:state.chatReducer
    }
}

export default connect(mapStateToProps)(Message);